<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>角色添加</title>
<link rel="stylesheet" href="${ctx}/static/js/layui/css/layui.css">
<link rel="stylesheet" href="${ctx}/static/js/formSelects-v4.css">
<style type="text/css">
.msg {
	color: red !important;
}
</style>
</head>
<body>
	<form class="layui-form" action="">
		<div class="layui-form-item">
			<label class="layui-form-label">角色名</label>
			<div class="layui-input-inline">
				<input type="text" name="rolename" required lay-verify="required"
					placeholder="请输入角色名" autocomplete="off" class="layui-input">
			</div>
			<div class="layui-form-mid layui-word-aux msg"></div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">备注</label>
			<div class="layui-input-inline">
				<input type="password" name="note" required lay-verify="required"
					placeholder="请输入备注" autocomplete="off" class="layui-input">
			</div>
			<div class="layui-form-mid layui-word-aux"></div>
		</div>
		
		<div class="layui-form-item">
				<label class="layui-form-label">权限分配</label>
				<div class="layui-input-block">
					<select name="menu" xm-select="menu">
						<option value=""></option>
					</select>
				</div>
			</div>
		
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
	<script src="${ctx}/static/js/layui/layui.js"></script>
	<script>
	layui.config({
        base: '${ctx}/static/js/' //此处路径请自行处理, 可以使用绝对路径
    }).extend({
        formSelects: 'formSelects-v4'
    });
		//Demo
		layui.use([ 'form', 'upload','formSelects'  ], function() {
			var form = layui.form;
			var upload = layui.upload;
			var $ = layui.$;
			var formSelects = layui.formSelects;

			//监听提交
			form.on('submit(formDemo)', function(data) {
				//$.post一般来说需要3个参数：url，参数，回调函数
				$.post('${ctx}/role/add', data.field, function(e) {
					if (e == "") {
						parent.layui.table.reload("demo");
						parent.layer.msg('添加成功', {
							icon : 1
						}); //高用父窗口中的layer来提示，这样关闭弹出窗后提示不会立马关闭
						var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
						parent.layer.close(index); //再执行关闭 
					} else {
						alert("失败");
					}
				})
				return false;
			});
		
			//光标离开后，去查询角色名是否存在
			$('input[name="rolename"]').blur(function() {
				var v = $(this).val();
				//Ajax请求
				$.ajax({
					url : '${ctx}/role/isExist',//地址
					data : { //data 是参数
						rolename : v
					},
					success : function(e) {//成功后回调函数
						if (e == "") {
							$('.msg').text("");
						} else {
							$('.msg').text(e);
							$('input[name="rolename"]').focus();
						}
					},
					error : function(xhr, status, error) {
						console.log("失败:" + xhr);
					}
				})

			})
			var data = '${menus}';
			var menus = JSON.parse(data);
			
			formSelects.data('menu', 'local', {
           		 arr: menus
        	});
		});
	</script>
</body>
</html>